<template>
	<view class="box" :style="{'padding-top':systemHeight+28.5+'px'}">
		<view class="head">
			<image class="back" src="/static/img/back.png" @click="back"></image>
			<view>{{title}}</view>
			<view class="right"></view>
		</view>
		<view class="avatar">
			<image class="avatar_img" src="/static/img/user.png"></image>
			<image class="change_avatar" src="/static/img/photo.png"></image>
		</view>
		<view class="box_content">
			<view class="title">First Name</view>
			<input class="inpu" placeholder="Enter your frst name" v-model="FirstName" />
			<view class="title">Last Name</view>
			<input class="inpu" placeholder="Enter your last name" v-model="LastName" />


			<view v-if="title=='Driver Join'">
				<view class="title">Mobile Number</view>
				<input class="inpu" placeholder="Enter your Mobile Number" v-model="number" />
				<view class="title">Car/Motorcycle</view>
				<view class="select_inp">
					<input class="inpu" placeholder="Choose your car type" v-model="carType" />
					<image class="select" src="/static/img/right.png"></image>
				</view>
				<view class="title">Vehicle color</view>
				<input class="inpu" placeholder="Enter your vehicle color" v-model="color" />
				<view class="title">Vehicle photos</view>
				<view class="add_img" @click="chooseImge(vehicleImgSrc)">
					<image class="img_src" :src="vehicleImgSrc"></image>
					<image class="add_img_pho" src="/static/img/add.png"></image>
					<view>Add photo</view>
				</view>
				<view class="title">ID photo</view>
				<view class="img_boxs">
					<view class="img_box" @click="chooseImge('idImgSrcLeft')">
						<image class="img_src" :src="idImgSrcLeft"></image>
						<image class="img_boxs_add" src="/static/img/cameraX.png"></image>
						<image class="img_bg" src="/static/img/card_bg.png"></image>
						<view class="img_box_title">Upload Driver's license</view>
						<view class="img_box_bottom">Driver's license</view>
					</view>
					<view class="img_box" @click="chooseImge('idImgSrcRight')">
						<image class="img_src" :src="idImgSrcRight"></image>
						<image class="img_boxs_add" src="/static/img/cameraX.png"></image>
						<image class="img_bg" src="/static/img/card_bg.png"></image>
						<view class="img_box_title">Upload Driver's license</view>
						<view class="img_box_bottom">Driver's license</view>
					</view>
				</view>
				<view class="title">Identity card</view>
				<view class="img_boxs">
					<view class="img_box" @click="chooseImge('IdenImgSrcLeft')">
						<image class="img_src" :src="IdenImgSrcLeft"></image>
						<image class="img_boxs_add" src="/static/img/cameraX.png"></image>
						<image class="img_bg" src="/static/img/card_bg.png"></image>
						<view class="img_box_bottom">Upload front facing photo</view>
					</view>
					<view class="img_box" @click="chooseImge('IdenImgSrcRight')">
						<image class="img_src" :src="IdenImgSrcRight"></image>
						<image class="img_boxs_add" src="/static/img/cameraX.png"></image>
						<image class="img_bg" src="/static/img/card_bg.png"></image>
						<view class="img_box_bottom">Upload front facing photo</view>
					</view>
				</view>
			</view>
		</view>
		<view class="unsave" @click="submit()" v-if="title=='Driver Join'&&(!FirstName || !LastName || !number || !carType || !color || 
						!vehicleImgSrc || !idImgSrcLeft || !idImgSrcRight || !IdenImgSrcLeft || !IdenImgSrcRight)">{{button}}</view>
		<view class="save" @click="submit()" v-else>{{button}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemHeight: null,
				title: '',
				button: '',
				vehicleImgSrc: '1',
				idImgSrcLeft: '',
				idImgSrcRight: '',
				IdenImgSrcLeft: '',
				IdenImgSrcRight: '',

				//姓、名
				FirstName: '',
				LastName: '',
				//电话号码
				number: '',
				//汽车类型
				carType: '',
				//应该是车颜色
				color: ''

			}
		},
		created() {
			this.systemHeight = uni.getSystemInfoSync().statusBarHeight
		},
		//1是myprofle  2是driver
		onLoad(e) {
			if (e.type == '1') {
				this.title = "My Profle"
				this.button = 'Save'
			}
			if (e.type == '2') {
				this.title = "Driver Join"
				this.button = 'Submit for review'
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//选则图片
			chooseImge(src) {
				let that=this
				uni.chooseImage({
					count: 1, //默认9
					success: (res) => {
						let igm = res.tempFilePaths[0];
						src = igm;
						uni.showToast({
							title:src
						})
					}
				});
			},
			//申请
			submit() {
				if (this.title == "My Profle") {
					if (this.FirstName && this.LastName) {
						uni.showToast({
							title: "申请ing",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "填写完整信息",
							icon: "none"
						})
					}
				} else {
					if (this.FirstName && this.LastName && this.number && this.carType && this.color && this
						.vehicleImgSrc && this.idImgSrcLeft && this.idImgSrcRight && this.IdenImgSrcLeft && this
						.IdenImgSrcRight) {
						uni.showToast({
							title: "申请ing",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "填写完整信息",
							icon: "none"
						})
					}
				}
			}
		}
	}
</script>

<style>
	.box {
		position: fixed;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
	}

	.head {
		width: 92%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 57rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 32rpx;
	}

	.back {
		width: 20rpx;
		height: 36rpx;
	}

	.right {
		width: 20rpx;
	}

	.avatar {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		margin-bottom: 55rpx;
	}

	.avatar_img {
		width: 140rpx;
		height: 140rpx;
	}

	.change_avatar {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
	}

	.box_content {
		width: 100%;
		height: 63vh;
		overflow: auto;
	}

	.title {
		margin: 40rpx auto 27rpx;
		width: 92%;
		font-family: Mont;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		line-height: 36rpx;
	}

	.select_inp {
		width: 100%;
		position: relative;
	}

	.inpu {
		flex-shrink: 0;
		margin: 0rpx 30rpx;
		box-sizing: border-box;
		width: 92%;
		padding-left: 36rpx;
		height: 92rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
	}

	.select {
		position: absolute;
		top: 50%;
		right: 60rpx;
		transform: translate(0, -50%);
		width: 11rpx;
		height: 20rpx;
	}

	.add_img {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: Mont;
		font-weight: 300;
		font-size: 24rpx;
		color: #757575;
		margin-left: 30rpx;
	}

	.img_src {
		position: absolute;
		z-index: 999;
		width: 100%;
		height: 100%;
	}

	.add_img_pho {
		width: 55rpx;
		height: 55rpx;
		margin-bottom: 34rpx;
	}

	.img_boxs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin: 0rpx auto;
		font-family: Mont;
		font-weight: 300;
		font-size: 24rpx;
		color: #101010;
	}

	.img_box {
		position: relative;
		width: 330rpx;
		height: 256rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.img_boxs_add {
		z-index: 999;
		margin-bottom: 20rpx;
		width: 61rpx;
		height: 61rpx;
	}

	.img_bg {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 80%;
	}

	.img_box_title {
		z-index: 99;
	}

	.img_box_bottom {
		z-index: 2;
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%, 0);
		font-family: Mont;
		font-weight: 500;
		font-size: 22rpx;
		color: #000000;
	}

	.unsave {
		position: absolute;
		bottom: 190rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 690rpx;
		height: 92rpx;
		background: #DFDFDF;
		border-radius: 46rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #888888;
		line-height: 92rpx;
		text-align: center;
	}

	.save {
		position: absolute;
		bottom: 190rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 690rpx;
		height: 92rpx;
		background: #34BA78;
		border-radius: 46rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
</style>